// 顶部导航菜单 用tabs实现
<template>
  <el-row class="main">
    <nav-header></nav-header>
    <el-row class="contentAll">
      <el-col class="siderbar">
        <el-row class="info-title">
          <div class="">账号信息</div>
        </el-row>
        <el-row class="user" style="margin-top:0;" v-if="memberGameAccount">
          <el-row>
            <el-col :span="12" class="info-left">账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</el-col>
            <el-col :span="12" class="info-right">{{memberGameAccount.username}}({{memberGameAccount.handicaps}})</el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="info-left">可用额度:</el-col>
            <el-col :span="12" class="info-right">{{memberGameAccount.remaining_amount}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="info-left">未结金额:</el-col>
            <el-col :span="12" class="info-right">{{memberGameAccount.unsettled_amount}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="info-left">当天盈利:</el-col>
            <el-col :span="12" class="info-right">{{memberGameAccount.daily_win}}</el-col>
          </el-row>
        </el-row>
        <el-row>
          <el-row class="info-title kaiJiang"><a href="http://1122kai.net" target="_blank">开奖网http://1122kai.net</a></el-row>
        </el-row>
        <el-row v-if="memberLastOrder">
          <el-row class="info-title">最新注单</el-row>
          <el-row class="period" v-if="memberLastOrder.new"> {{memberLastOrder.period}}期 </el-row>
        </el-row>
        <el-row class="zhudan" style="margin-top:0;overflow:auto; max-height: 400px;" v-if="memberLastOrder">

          <el-row class="item" v-for="(value,key,index) in memberLastOrder.new " :key="`${index}${key}`">
            <el-row>
              <el-col :span="8" class="info-left">注单号:</el-col>
              <span style="margin-top:5px;display:inline-block;color:#119400;">{{value.注单号}}</span>
            </el-row>
            <el-row>
              <el-col  v-if="key==index" :span="24" v-for="(item,index) in Tarray" :key="`${index}`" class="info-right" style="color:#0017C7;text-align:center;margin-top: 5px"><span style="color: #9932cd; font-weight: bold;">{{item[0]}}</span><span style=" font-weight: bold;">@</span><span style="color: red; font-weight: bold;">{{item[1]}}</span></el-col>
              <!--<el-col  :span="24" v-for="item in value.内容" :key="item" class="info-right" style="color:#0017C7;text-align:center;margin-top: 5px">{{item}}</el-col>-->
            </el-row>
            <el-row>
              <el-col v-if="value.分组" :span="10" class="info-left" style="margin-top: 5px">分&nbsp;&nbsp;组:</el-col>
              <el-col v-if="value.分组" :span="10" class="info-left" style="margin-top: 5px">{{value.分组}}</el-col>
              <el-col v-if="value.合计额" :span="10" class="info-left" style="margin-top: 5px">合计额:</el-col>
              <el-col v-else :span="10" class="info-left" style="margin-top: 5px">下注金额:</el-col>
              <el-col v-if="value.合计额" :span="10" style="margin-top: 5px"  class="info-right">{{value.合计额}}</el-col>
              <el-col v-else :span="14" class="info-right" style="margin-top: 5px">{{value.下注金额}}</el-col>
            </el-row>
            <el-row>
              <el-col v-if="value.可赢额" :span="10" class="info-left">可赢额:</el-col>
              <el-col v-else :span="10" class="info-left">可赢金额:</el-col>
              <el-col v-if="value.可赢额" :span="14" class="info-right">{{value.可赢额}}</el-col>
              <el-col v-else :span="14" class="info-right">{{value.可赢金额}}</el-col>
            </el-row>
            <table v-if=" value.组合列表" border="0"
                   style="width:100%;margin-top: 3px;background-color: #b9c2cb" cellpadding="0" cellspacing="1">
              <tr style="background-color: #ebd7d7">
                <th>ID</th>
                <th>号码组合</th>
                <th>下注额</th>
              </tr>
              <tr v-for="(item,index) in value.组合列表" :key="index">
                <td style="text-align: center;background-color: #fff">{{item.ID}}</td>
                <td style="text-align: center;background-color: #fff">{{item.号码组合}}</td>
                <td style="text-align: center;background-color: #fff">{{item.下注额}}</td>
              </tr>
            </table>
          </el-row>
          <el-row v-if="item.组合列表"  class="total" v-for="(item,index) in memberLastOrder.new" :key="index">
            <el-row>
              <el-col :span="12" class="info-left">合计下注:</el-col>
              <el-col :span="12" class="info-right">{{item.groups}}笔</el-col>
            </el-row>
            <el-row>
              <el-col :span="12"  class="info-left">合计金额</el-col>
              <el-col :span="12" class="info-right">{{item.合计额}}</el-col>
            </el-row>
          </el-row>
          <el-row v-if="memberLastOrder.new && !memberLastOrder.new[0].组合列表" class="total">
            <el-row>
              <el-col :span="12" class="info-left">合计下注</el-col>
              <el-col :span="12" class="info-right">{{memberLastOrder.count}}笔</el-col>
            </el-row>
            <el-row>
              <el-col :span="12"  class="info-left">合计金额</el-col>
              <el-col :span="12" class="info-right">{{memberLastOrder.total_amount}}</el-col>
            </el-row>
          </el-row>
        </el-row>
      </el-col>
      <div class="main-contain">
        <app-main></app-main>
      </div>
    </el-row>
    <el-row class="LayBottom">
      <el-col :span="23">
        <marquee class="info" scrollamount="2">{{noticegg}}</marquee>
      </el-col>
      <el-col :span="1">
        <div @click="setupclick" class="info more">更多</div>
      </el-col>
    </el-row>
    <div class="bet-list">
      <div v-show="faletknotic" class="lsggtk"
           style="position: absolute;top: 50%;left:50%; z-index: 999;width: 800px; min-height:500px;margin: -250px 0 0 -400px;background: #fff">
        <div class="lsgg" style="height: 25px;;padding: 0 2px;">
          <span style="line-height: 25px;font-size: 14px">历史公告</span>
          <span style="float: right;line-height: 25px;font-size: 14px;cursor: pointer" class="el-icon-close"
                @click="closeclick"></span>
          <div style="clear: both"></div>
        </div>
        <table v-if="noticeggadd" border="0" cellspacing="1" width="98%" style="margin: 1%;border-collapse:collapse;border:none;">
          <tr class="lsggxq" style="height: 36px;line-height: 33px">
            <th class="lsggcontent" style="width: 15%">时间</th>
            <th class="lsggcontent">公告详情</th>
          </tr>
          <tr v-for="item in noticeggadd" :key="item.id">
            <td class="lsggcontents" style="text-align: center;">{{item.cTime}}</td>
            <td class="lsggcontents" style="text-indent: 2em;">{{item.content}}</td>
          </tr>
        </table>
        <div class="lsggxq"
             style="height: 36px;line-height:36px;
      text-align: center;position: absolute;bottom: 0;left: 0;right: 0">
        <span
          class="lsgggb"
          @click="determine"
          style="display: inline-block;width: 70px;height: 20px;
          line-height:20px;text-align:center;color: #fff;cursor: pointer">
          关闭
        </span>
        </div>
      </div>
      <div class="lsggs"
           v-show="faletkkunotic" style="width: 600px;position: absolute;padding: 0 0 2% 0;
     left: 50%;top:45%;margin: -180px 0 0 -300px;border-radius: 5px;z-index: 888">
        <div @click="setupclickssnotic" class="el-icon-close"
             style="float: right;margin:10px; width: 14px; height: 16px;font-size: 18px;color: #ffffff;cursor: pointer"></div>
        <div style="float: left;height: 200px; width: 180px;">
          <img style="margin: 50px 0px 0px 12px;width: 155px;height: 149px;" src="/static/member/images/popup_icongg.png">
        </div>
        <div v-if="noticeggadd" style="float: left;width: 404px;font-size: 14px;line-height: 15px;color: #fff; padding-right: 8px;max-height: 280px;overflow-y: auto;">
          <div v-for="item in noticeggadd" :key="item.id" class="borders" style="margin-top: 15px;padding-bottom: 15px;">
            <div>{{item.cTime}}</div>
            <div>{{item.content}}</div>
          </div>
        </div>
        <div style="clear: both"></div>
      </div>
      <div v-if="faletkkunotic"
           style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: #888;opacity: 0.3;z-index: 500">
      </div>
      <div v-if="faletk && noticeggadd" class="lsggs"
           style="position: fixed;width: 300px;padding: 0 0 2% 0;left: 50%;top: 50%;
    margin: -200px 0 0 -150px;border-radius: 5px;user-select: none; z-index: 999;">
        <div @click="arrowplus" class="el-icon-close" style="float: right;margin: 10px;width: 14px;height: 16px;font-size: 16px;color: #ffffff;cursor: pointer"></div>
        <div style="margin: auto;width: 40%;text-align: center;color: white;padding-top: 7px;">
          <span @click="arrowreduction" style="float: left;font-size: 15px;cursor: pointer"><&nbsp;<</span>
          <span style="font-size: 14px">{{nums}}/{{noticeggadd.length}}</span>
          <span @click="arrowplus" style="float: right;font-size: 15px;cursor: pointer">>&nbsp;></span>
        </div>
        <div style="margin: 15px auto 0;width: 149px;position: relative">
          <img style="margin-top: 25px; " src="/static/member/images/popup_icontz.png">
          <div @click="more" style="font-weight: 900; width: 40px;text-align: center;font-size: 14px; padding: 0.5px 2px;border-radius: 3px;
        color: red;text-decoration: none;text-shadow: none;background: #ffffff;position: absolute;right: -21%;top: 68%;z-index: 999;
        cursor: pointer">更多</div>
        </div>
        <div v-for="(item,index) in noticeggadd" :key="item.id" style="font-size: 13px;color: #fff;width: 252px;text-align: center;margin: 10px auto 0;line-height: 22px;">
          <div v-if="index === num">{{item.content}}</div>
        </div>
        <div style="width: 150px;margin: 20px auto 0;cursor: pointer;">
          <div id="animate" class="animate" @click="arrowplus" style="font-weight: 900;float: right;width: 140px;text-align: center;font-size: 14px;position: relative;padding: 10px 6px;
          border-radius: 3px;color: #fff;text-decoration: none;text-shadow: none;background-color: #fec436; border-bottom: 5px solid #d18922;" @mousedown="mouseDown" @mouseup="mouseUp">
            知道
          </div>
        </div>
      </div>
      <div
        v-show="faletkku" class="lsggs" style="width: 600px;position: absolute;padding: 0 0 2% 0;
     left: 50%;top:50%;margin: -180px 0 0 -300px;border-radius: 5px;z-index: 888">
        <div @click="setupclickss" class="el-icon-close"
             style="float: right;margin:10px; width: 14px; height: 16px;font-size: 18px;color: #ffffff;cursor: pointer"></div>
        <div style="float: left;height: 200px; width: 180px;">
          <img style="margin: 50px 0px 0px 12px;width: 155px;height: 149px;" src="/static/member/images/popup_icongg.png">
        </div>
        <div v-if="noticeggadd" style="float: left;width: 404px;font-size: 14px;line-height: 15px;color: #fff; padding-right: 8px;max-height: 280px;overflow-y: auto;">
          <div v-for="item in noticeggadd" :key="item.id" class="borders" style="margin-top: 15px;padding-bottom: 15px;">
            <div>{{item.cTime}}</div>
            <div>{{item.content}}</div>
          </div>
        </div>
        <div style="clear: both"></div>
      </div>
    </div>
    <div v-if="faletk"
         style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: #000000;opacity: 0.7;z-index: 500">
    </div>
    <div v-if="faletkku"
         style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: #000000;opacity: 0.5;z-index: 500">
    </div>
  </el-row>
</template>

<script>
  import { getToken } from '@/utils/auth' // 验权
  import { mapGetters } from 'vuex'
  import AppMain from '@/views/member/components/AppMain'
  import NavHeader from '@/views/member/components/NavHeader'
  import $ from 'jquery'

  let interval = null
  export default {
    name: 'layout',
    data() {
      return {
        appHeight: 0,
        num: 0,
        nums: 1,
        requestInterval: 10, // 请求间隔秒数
        faletknotic: false,
        faletkkunotic: false,
        faletkku: false,
      }
    },
    computed: {
      ...mapGetters([
        'memberGameAccount',
        'memberPages',
        'memberLottery',
        'memberLastOrder',
        'noticegg',
        'noticeggadd',
        'faletk',
      ]),
      Tarray(){
        var left=[]
        console.log(left,'asdaz')
        if(this.$store.getters.memberLastOrder){
          console.log('123')
          for(const key in this.$store.getters.memberLastOrder.new){
            left[key]=this.$store.getters.memberLastOrder.new[key].内容[0].split('@')
          }
          console.log(left,'asdaz')
          return left
        }
      },
    },
    async created() {
      this.addEvent_arrowplus()
      this.appHeight = window.innerHeight - 167
      this.$store.commit('agree', true)
      await this.$store.dispatch('MemberOrdersRaw', { page: 2 })
      this.setIntervalRequest()
      await this.$store.dispatch('noticeggs', {})
      await this.$store.dispatch('noticeadd', {})
      console.log(this.$store.getters.memberLastOrder,'888888888')
      this.Tarray
    },
    components: {
      AppMain,
      NavHeader,
    },

    methods: {
      // 为“知道”移出事件
      removeEvent_arrowplus() {
        const that = this
        document.onkeydown = function(e) {
          const key = window.event.keyCode
          if (key === 13) {

          }
        }
      },

      // 为“知道”绑定事件
      addEvent_arrowplus() {
        const that = this
        document.onkeydown = function(e) {
          const key = window.event.keyCode
          if (key === 13) {
            that.arrowplus() // 方法
          }
        }
      },
      mouseUp() {
        $(function() {
          $('.animate').removeClass('change')
        })
      },
      mouseDown() {
        $(function() {
          $('.animate').addClass('change')
        })
      },
      getTokens() {
        if (getToken()) {
          this.$store.commit('agree', true)
        } else {
          this.$store.commit('agree', false)
        }
      },
      more() {
        this.faletkku = true
        this.$store.commit('agree', false)
      },
      setupclickss() {
        this.faletkku = false
      },
      arrowreduction() {
        if (this.nums === 1) {
          return false
        } else {
          this.num -= 1
          this.nums -= 1
        }
      },
      arrowplus() {
        if (this.num >= this.noticeggadd.length - 1) {
          this.$store.commit('agree', false)
          this.removeEvent_arrowplus()
          return false
        } else {
          this.num += 1
          this.nums += 1
        }
      },

      setupclick() {
        this.faletknotic = true
        this.faletkkunotic = true
      },
      setupclickssnotic() {
        this.faletkkunotic = false
      },
      closeclick() {
        this.faletknotic = false
      },
      determine() {
        this.faletknotic = false
      },
      setIntervalRequest() {
        clearInterval(interval)
        interval = setInterval(async() => {
          await this.request()
        }, 1000 * this.requestInterval)
      },
      async request() {
        if (this.$route.path !== '/member/list') {
          await this.$store.dispatch('MemberGamePeriod', {})
        }
        // 获取对应游戏的当期信息
        await this.$store.dispatch('MemberGameAccount', {})
      },
    },
  }
</script>

<style  rel="stylesheet/scss" lang="scss" scoped>
  .contentAll{
    position:absolute;
    top:135px;
    bottom:30px;
    width:100%;
  }
  .main {
    background-color: #f2f2f2;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    min-height: 100vh;
    min-width: 1155px;
    padding-bottom: 28px;

    .siderbar::-webkit-scrollbar{
      display: none;
    }
    .siderbar {
      background-color: #f2f2f2;
      height: 100%;
      background-size: 100% 100%;
      width: 190px;
      position: absolute;
      z-index: 1;
      overflow: auto;
      .el-row {
        margin-top: 4px;
      }
      .kaiJiang:hover{
        color: #ff6e39;
      }
      .info-title {
        font-weight: 700;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin: 0px 8px 0 8px;
        /*background: url(/static/member/images/skin/blue/bg-sprites.png) repeat-x 0 -58px;*/
      }
      .user {
        background-color: #fff;
        margin: 0 8px;
        padding-top: 8px;
        /*border: 1px solid rgb(195, 230, 244);*/
        .info-left {
          text-align: right;
          padding-right: 10px;
        }
        .info-right {
          background-color: #fff;

        }
      }

      .period {
        @extend .info-title;
        text-align: center;
        /*background: rgb(195, 230, 244);*/
        /*color: #fff;*/
        height: 25px;
        line-height: 25px;
        /*border-top: 1px solid #fff;*/
      }
      .zhudan {
        @extend .user;
        .el-row{
          padding-top: 2px;
          margin: 0;
        }
        .item {
          border-left: 1px solid #b9c2cb;
          border-right: 1px solid #b9c2cb;
          border-top: 1px solid #b9c2cb;
          padding-bottom: 2px;
          font-size: 12px;
        }
        .item:last-child{
          border-bottom: 1px solid #b9c2cb;
        }
        .total{
          padding: 0 !important;
          .el-row{
            margin: 0 !important;
            border:1px solid #b9c2cb;
            padding: 0 !important;
          }
          .el-row:last-child{
            border-top: 0;
          }
          .info-left{
            border-right:1px solid #b9c2cb;
            padding: 4px 5px 4px 0;
            background: #F8F9FE;
          }
          .info-right {
            background-color: #fff;
            text-align: center;
            padding: 4px 0;
          }
        }
      }
    }

    .main-contain {
      height:100%;
      .app-main {
        background-color: #fff;
      }
    }

    .LayBottom {
      /*background-color: rgb(12, 62, 108);*/
      position: absolute;
      bottom: 0px;
      width: 100%;
      .el-col {
        .info {
          margin: 0;
          border: none;
          height: 27px;
          line-height: 27px;
          font-weight: bold;
          font-size: 14px;
          color: #fff;
        }
        .more {
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
  .borders{
    border-bottom: 1px solid rgba(255, 255, 255, 0.71)
  }
  .borders:last-child{
    border-bottom: none;
  }
  .animate{
    transition: all 0.1s;
    -webkit-transition: all 0.1s;
  }
  .change{
    border-bottom: 0 !important;
    margin-top: 5px;
  }
</style>
